import React, { useState } from 'react';
import Right from "../../../../components/Record/Right"
import MyAsking from "../../../../components/Record/MyAsking"
import MyAnswer from "../../../../components/Record/MyAnswer"
import "./myAsk.scss";

const MyAsk = () => {
    const [list,setList] = useState(["我的问题", "我的回答"])
    const [cur, setCur] = useState(0)
    const changeCur = (index) => {
        setCur(index)
    }
    return (
        <div id="myAsk">
            <div className="myAsk_left">
                <h1>
                    {
                        list&&list.map((item,index)=>{
                        return <span key={index} className={cur===index?"myAskActive":""} onClick={()=>changeCur(index)}>{item}</span>
                        })
                    }
                </h1>
                {
                    cur?<MyAnswer />:<MyAsking />
                }
            </div>
            <Right />
        </div>
    );
};

export default MyAsk;